<template>
  <!-- 文字缩放测试 -->
  <div class="page-lyd">
    <div class="top-title-section">
      <h1>文字缩放测试</h1>
    </div>
    <!-- 列表 -->
    <div class="long-list-section">
      <!-- <div class="temp-label" v-auto-font-size="{ baseFontSize: 14, minFontSize: 12, maxFontSize: 16 }">容器 100px</div>

       <div class="temp-label" v-auto-font-size="{ baseFontSize: 16, minFontSize: 8, maxFontSize: 30 }">{{ message }}</div>

       <div class="temp-label" v-auto-font-size="{ baseFontSize: 16, minFontSize: 2, maxFontSize: 30 }">这是一段测试文字</div>

       <div class="temp-label" v-auto-font-size="{ baseFontSize: 16, minFontSize: 10, maxFontSize: 30 }">这是一段测试文字这是一段测试文字</div> -->


       <div class="temp-label2" v-auto-font-size="{ baseFontSize: 14, minFontSize: 2, maxFontSize: 14 }">-2416.94</div>

       
       <div class="temp-label" v-auto-font-size="{ baseFontSize: 14, minFontSize: 2, maxFontSize: 14 }">
        <span>市值</span>/<span>名称比较长非常长</span>
       </div>

    </div>
  </div>
</template>

<script>
  import autoFontSize from './autoFontSize.js';

  export default {
    data() {
      return {
        message: 'Hello短文字',
      };
    },
    directives: {
      autoFontSize
    },
    computed: {
      
    },
    created() {

      setTimeout(() => {
        this.message = "这是一段特别长的文字，文字长的无所发热热热热热热"
      }, 3000);


    },
    mounted() {},
    methods: {
      clickItemAction() {

      }
    }
  };
</script>

<style lang="less" scoped>
/* stylelint-disable */

.top-title-section {
  background-color: green;
  padding: 30px;
}
.long-list-section {
  width: 100px;
  background-color: cyan;
  padding-left: 10px;
  font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","HarmonyOS Sans","Roboto","PingFang SC",sans-serif;
}
.temp-label {
  background-color: #c0a1a1;
  margin-top: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
}

.temp-label2 {
  width: 59px;
  background-color: #c0a1a1;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>
